<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="__Admin__/css/style.css" rel="stylesheet" type="text/css" />
    <script language="JavaScript" src="__Admin__/js/jquery.js"></script>
    <script type="text/javascript" charset="utf-8" src="__ED__/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="__ED__/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="__ED__/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" charset="utf-8" src="__Admin__/validate/jquery.validate.min.js"></script>

    <link rel="stylesheet" href="__Admin__/timebox/calendar.css" type="text/css" />
    <script type="text/javascript" charset="utf-8" src="__Admin__/timebox/calendar.js"></script>
    <style>
        .textinput2{
            width: 800px;
            height: 320px;
            border: none;
        }
        .formtitle span.current{
            border-bottom: solid 3px #66c9f3;
        }
        .formtitle span{
            position: static;
            margin-right: 4px;
            border: none;
            cursor: pointer;
        }
        .forminfo:first-child{
            display: block;
        }
        .forminfo{
            display: none;
        }
        .calendar .nav{
            display: none;
        }
        .forminfo .add,
        .forminfo .div{
            font-size: 16px;
            margin-right: 10px;
            cursor: pointer;
        }

    </style>
</head>

<body>
    <div class="place">
        <span>位置：</span>
        <ul class="placeul">
            <li><a href="#">首页</a></li>
            <li><a href="#">表单</a></li>
        </ul>
    </div>
    <div class="formbody">
        <div class="formtitle">
            <span class="current">基本信息</span>
            <span>商品介绍</span>
            <span>商品相册</span>
        </div>
        <form action="{:U('edit')}" method="post" id="regform" enctype="multipart/form-data">
            <ul class="forminfo">
                <li>
                    <label>商品名称</label>
                    <input name="goods_name" value="{$info['goods_name']}" placeholder="请输入商品名称" type="text" class="dfinput" /><i>名称不能超过30个字符</i></li>
                <li>
                    <label>商品价格</label>
                    <input name="goods_price" value="{$info['goods_price']}" placeholder="请输入商品价格" type="text" class="dfinput" /><i></i></li>
                <li>
                    <label>商品数量</label>
                    <input name="goods_number" value="{$info['goods_number']}" placeholder="请输入商品数量" type="text" class="dfinput" />
                </li>
                <li>
                    <label>商品重量</label>
                    <input name="goods_weight" value="{$info['goods_weight']}" placeholder="请输入商品重量" type="text" class="dfinput" />
                </li>

                <li><label>是否上架</label>
                    <cite>
                        <input name="is_show" type="radio" value="1" <if condition="$info['is_show'] eq 1">checked</if>  />上架&nbsp;&nbsp;&nbsp;&nbsp;<input name="is_show" type="radio" value="0" <if condition="$info['is_show'] eq 0">checked</if>  />下架
                    </cite>
                </li>
                <li>
                    <label>图片上传</label>
                    <input name="goods_big_logo" type="file"/>
                </li>
                <li>
                    <label>添加时间</label>
                    <input name="created_time" value="{$info.created_time|date='Y-m-d H:i:s', ###}" id="created_time"  type="datetime" class="dfinput" />
                </li>
            </ul>
            <ul class="forminfo">
                <li>
                    <label>商品描述</label>
                    <textarea name="goods_introduce" id="goods_introduce" placeholder="请输入商品描述" cols="" rows="" class="textinput textinput2"></textarea>
                </li>
            </ul>
            <ul class="forminfo goods_photos">
                <li>
                    <span class="add">[ + ]</span><input name="goods_photos[]" type="file"/>
                </li>
            </ul>
            <ul>
                <li>
                    <label>&nbsp;</label>
                    <input type="hidden" name="goods_id" value="{$info['goods_id']}"  />
                    <input type="hidden" name="goods_big_logo" value="{$info['goods_big_logo']}" />
                    <input type="hidden" name="goods_small_logo" value="{$info['goods_small_logo']}"/>
                    <input name="" id="btnSubmit" type="submit" class="btn" value="确认保存" />
                </li>
            </ul>
        </form>
    </div>
</body>
<script>
    // 栏目验证
    /*$('#regform').validate({
        rules: {
            goods_name: {required:true},
            goods_price: {required:true},
            goods_number: {required:true},
            goods_weight: {required:true},
            goods_introduce: {
                required: true,
                minlength: 2
            },
        },
        messages: {
            goods_name: "*必填",
            goods_price: "*必填",
            goods_number: "*必填",
            goods_weight: "*必填",
            goods_introduce: {
                required: "*必填",
                minlength: "至少2个字符"
            },
        },
    });*/

    // 绑定点击样式
    $('.formtitle span').click(function () {
        // 当前被点击span获取样式其它兄弟隐藏样式
        $(this).addClass('current').siblings().removeClass('current');
        // 让当前被点击的ul显示，然后让其它ul隐藏
        $('.forminfo').eq( $(this).index() ).show().siblings('.forminfo').hide();
    });

    // 实例化富文本编辑器
    var ue = UE.getEditor('goods_introduce', {
        initialFrameWidth:800  //初始化编辑器宽度,默认1000
        ,initialFrameHeight:200  //初始化编辑器高度,默认320
        //工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的从新定义
        , toolbars: [[
                    'undo', 'redo', '|','bold', 'italic', 'underline', 'fontborder', 'strikethrough',
                    'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote',
                    'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist',
                    'selectall', 'cleardoc', '|','rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                    'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|','directionalityltr',
                    'directionalityrtl', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright',
                    'justifyjustify', '|', 'touppercase','tolowercase', '|','link', 'unlink', '|',
                    'imagenone', 'imageleft', 'imageright', 'imagecenter', '|','horizontal', 'date', 'time',
                    'spechars'
        ]]
    });

    // 时间选择器
    Calendar.setup({
        inputField     :    "created_time",
        ifFormat       :    "%Y-%m-%d %H:%M:%S",
        showsTime      :    true,
        timeFormat     :    "12"
    });

    // 使用jQ动态增加相册的文件上传框
   $('.forminfo').on('click', '.add', function (e) {
     $(e.target).parent().clone().find('span').removeClass('add').addClass('div').html('[ - ]').parent().appendTo('.goods_photos');
    });
    // 使用jQ动态删除相册的文件上传框
   $('.forminfo').on('click', '.div', function (e) {
       $(e.target).parent().remove();
   });

    /*    // 使用jQ动态增加相册的文件上传框
   $('.forminfo').on('click','.add',function(e){
        // 使用 e.target 获取到最初被点击的那个DOM元素
        $(e.target).parent()  // 找到 当前被点击的.add的父级元素li
            .clone()   // 把父级元素li复制出来
            // 把复制出来的li里面的span中的 加号 改成 - 号,并修改样式成 .div
            .find('span').removeClass('add').addClass('div').html('[ - ]')
        // 接下来还要把 span的父级元素找到，并追加到 相册中
            .parent().appendTo('.goods_photos');
        // $(e.target).parent().clone().appendTo('.goods_photos');
    });*/

</script>
</html>
